<template>
  <div>
    ArrearageTopTen欠费前十
    <div id="ArrearageTopTen" :style="{height:`500px`,width:`500px`}"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    var ArrearageTopTen = echarts.init(
      document.getElementById("ArrearageTopTen")
    );
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        data: ["抄见数", "抄见率", "增加", "减少", "总数"]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: "value"
      },
      yAxis: {
        type: "category",
        data: ["一", "二", "三", "四", "五", "六", "七"]
      },
      series: [
        {
          name: "抄见数",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight"
          },
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          name: "抄见率",
          type: "line",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight"
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: "增加",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight"
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: "减少",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight"
          },
          data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
          name: "总数",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight"
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
    ArrearageTopTen.setOption(option, true);
  }
};
</script>